<template>
  <div class="header-box">
    <div class="header_item">
      <div class="title">
        <div class="center">
          <img src="../../assets/Img/login.png" alt="" class="log" />
          <span class="text">骆驼集团业务中台</span>
        </div>
      </div>
      <div
        class="header_title"
        v-for="(item, index) in navIds"
        :key="item.id"
        id="houver_styles"
        :class="{ clicked: activeIndex === item.id }"
        @click="refresh(item)"
        style="
          margin-left: 20px;
          display: flex;
          align-items: center;
          justify-content: center; /* 垂直居中 */
          height: 50px;
          width: 80px;
          text-align: center; /* 水平居中 */
          font-size: 14px;
        "
      >
        {{ item.name }}
      </div>

      <!-- <el-breadcrumb
        separator="/"
        class="header_left_title"
        v-if="innerWidth > 750"
      >
        <el-breadcrumb-item :to="{ path: '/home' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ titleList.Pname }}</el-breadcrumb-item>
        <el-breadcrumb-item v-if="titleList.name">{{
          titleList.name
        }}</el-breadcrumb-item>
      </el-breadcrumb> -->
    </div>
    <div class="header_item_right" style="justify-content: flex-end;margin-right:15px">
      <div id="houver_style" class="header_icon" @click="Click_fullscreen">
        <el-icon @click="toggleFullscreen"
          ><component is="Search"
        /></el-icon>
      </div>

      <div id="houver_style" class="header_user">
        <span class="user_title">admin </span
        ><span class="user_icon">
          <el-icon style="height: 60px; line-height: 60px !important"
            ><component is="ArrowDownBold" /></el-icon
        ></span>
        <div class="user_operate">
          <div></div>
          <div>个人中心</div>
          <div>修改密码</div>
          <span
            ><div @click="getQuit">
              <el-icon size="11px" style="height: 22px; padding-right: 3px"
                ><component is="SwitchButton"
              /></el-icon>
              安全登出
            </div></span
          >
        </div>
      </div>
      <!-- <div id="houver_style" class="header_rigth_more">
        <el-icon class="header_rigth_more_icon" @click="header_rigth"
          ><component is="MoreFilled"
        /></el-icon>
      </div> -->
    </div>
  </div>
  <div></div>
</template> 
<script  setup lang="ts">
import {
  onMounted,
  defineProps,
  provide,
  inject,
  watchEffect,
  watch,
  onBeforeUnmount,
} from "vue";
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

import bus from "@/mitt";

import { ElMessageBox, ElMessage } from "element-plus";

const router = useRouter();

const drawer = ref(true);
let titleList = reactive({ Pname: "", name: "" });

const innerWidth = ref(window.innerWidth);
const navIds = ref([]); // 一级菜单
const activeIndex = ref("");
// const store = inject("store");
// const store_state = inject("store_state");
//点击一级菜单
const refresh = (val) => {
  activeIndex.value = val.id;
  //保存本地并且存入到store中
  proxy.$store.oneSetMenuList(val.id);
};

onMounted(() => {
  const params = JSON.parse(sessionStorage.getItem("NavList"));
  if (params && Array.isArray(params)) {
    params.forEach((item) => {
      let data = {
        id: item.id,
        name: item.name,
        parent_id: item.parent_id,
        slug: item.slug,
        web_icon: item.web_icon,
        web_path: item.web_path,
      };
      navIds.value.push(data); // 将每个项的 id 写入数组
    });
    refresh(navIds.value[0]); // 传递第一个元素给 refresh 函数
  }
});
//监听
watch(
  () => proxy.$store_state.menus.value,
  (newValue) => {
    const params = JSON.parse(sessionStorage.getItem("NavList"));
    params.forEach((res) => {
      res.children.forEach((val) => {
        if (val.web_path === newValue) {
          refresh(res);
        }
      });
    });
  }
);

//安全登出
const getQuit = () => {
  ElMessageBox.confirm("是否确定退出?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 确定按钮被点击时的操作
      localStorage.clear();
      sessionStorage.clear();
      router.push("/");
      proxy.$store.Click_logOf();
    })
    .catch(() => {
      ElMessage.info("已取消退出");
    });
};

const Click_fullscreen=()=>{
  bus.emit('header_rigth',drawer.value)
}
 
</script>
<style scoped lang="less" >
.header-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #545c64;
  color: #fff;
  justify-content: space-between;
  .header_item {
    // width: 470px;
    height: 100%;
  }
  .header_item_right {
    width: 470px;
    height: 100%;
  }
  div:first-child {
    display: flex;
    .header_icon {
      width: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .header_left_title {
      display: flex;
      justify-content: center;
      justify-content: flex-end;
    }
  }
  div:last-child {
    display: flex;
    justify-content: center;
    .header_icon,
    .header_rigth_more {
      width: 40px;
      display: flex;
      font-size: 20px;
      justify-content: center;
      align-items: center;
    }
    .header_left_title {
      display: flex;
      justify-content: center;
    }
    .header_user {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 10px;
      position: relative;
      .user_operate {
        position: absolute;
        width: 100px;
        height: 120px;
        background: #ffffff;
        border: 1px solid #f4f4f4;
        top: 52px;
        left: 0px;
        border-radius: 5px;
        box-shadow: 1px 1px 10px#ccc;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        font-size: 12px;
        visibility: hidden;
        z-index: 999;
        .centered-text {
          text-align: center;
        }
        div,
        span {
          width: 100%;
          padding: 4px 0;
          text-align: center;
        }
        div:hover,
        div:active {
          background: #ece9e9;
          cursor: pointer; /* 可选：显示手型指示元素是可点击的 */
        }
        span {
          display: flex;
          align-items: center;
          justify-items: center;
        }
      }
      .user_operate::after {
        position: absolute;
        content: " ";
        width: 0px;
        border: 5px solid #fff;
        border-right-color: transparent;
        border-top-color: transparent;
        border-left-color: transparent;
        top: -10px;
      }

      .user_title {
        font-size: 14px;
        padding-left: 6px;
      }
      .user_icon {
        margin-left: 5px !important;
      }
    }
    ::deep(.header_rigth_more_icon) {
      transform: rotate(90deg) !important;
    }
  }
}

.demo-type {
  display: flex;
}
.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

#houver_style:hover {
  background: #eeecec;
  color: #000;
}
#houver_styles:hover {
  background: #eeecec;
  color: #000;
  cursor: pointer;
}
.header_title.clicked {
  background-color: #6a6d6d !important; /* 你可以更改为想要的颜色 */
  color: #dae7f5;
}

.header_user:hover .user_operate {
  visibility: visible !important;
}
::v-deep .el-tabs__nav-scroll {
  background-color: white;
  color: black;
}

.title {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  .center {
    align-content: center;
    .log {
      width: 30px;
      height: 30px;
      margin-left: 10px;
    }
    .text {
      align-content: center;
      font-size: 18px;
      font-weight: 700;
    }
  }
  // .header_title {
  //   display: flex;
  //   align-items:center
  //   // align-items:center

  // }
}
</style>